<template>
  <!-- 模态框遮罩层 -->
  <Teleport to="body">
    <Transition name="modal-fade">
      <div v-if="modelValue" class="modal-overlay" @click="handleOverlayClick">
        <div class="modal-container" @click.stop>
          <!-- 关闭按钮 -->
          <button class="modal-close-btn" @click="handleClose" title="关闭">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>

          <!-- 登录主体内容 -->
          <div class="converted-UserLogin">
            <div class="wrapper" id="__signIn-v2-wrapper">
              <div class="note_box" id="note_box" style="display: none">
                当前的浏览器版本过低，建议使用谷歌浏览器,体验更好的浏览效果.
                <a
                  href="http://dlsw.baidu.com/sw-search-sp/soft/9d/14744/ChromeStandaloneSetup43.0.2357.130.1435047900.exe"
                  style="margin-left: 30px; text-decoration: underline"
                >
                  点此下载最新版本谷歌浏览器
                </a>
              </div>
              <div class="user_loading" id="user_loading"></div>
              <!-- <div class="top-to-jump-action no-iframe"> <div top-to-register class="normal text-center"> 还没有账号，<a href="/join?" class="top-action-btn login-btn-ghost-default" >免费注册</a> </div> </div> -->
              <div class="login_main login-main-content login-main-new-content login-main-content-iframe">
                <div class="single-login-title-container" id="single-login-title-container">
                  <div class="choose-type-title">
                    <div class="title">登录草料账号</div>
                  </div>
                </div>
                <div class="login-step-first-box clearfix sign-form-content">
                  <div class="login-step-first" id="weixin-login-content">
                    <div class="weixin-img-wapper">
                      <h2 class="login-main-title login-main-title_login" id="login-main-title">微信扫码登录</h2>
                      <div class="weixin-code-imgbox">
                        <img
                          alt=""
                          id="weixin-login-qrcode"
                          src=""
                        />
                        <div class="scan-overlay-tips" id="scan_successfuly" style="display: none">
                          <p class="overlay_main">扫描成功</p>
                          <p class="overlay_sub">请在手机端确认登录</p>
                          <div
                            class="overlay_sub"
                            style="
                              display: flex;
                              justify-content: center;
                              position: relative;
                              right: 8px;
                              cursor: pointer;
                            "
                          >
                            <div style="margin: 0 4px 0 0">
                              <img
                                alt=""
                                src="../../assets/images/ee355e143e1d.png"
                                style="height: 12px; width: 12px; margin-top: -2px"
                              />
                            </div>
                            <div style="margin: 0">刷新二维码</div>
                          </div>
                        </div>
                        <div class="scan-overlay-loading" style="display: none">
                          <img alt="" src="../../assets/images/8ccb61dca5a2.gif" />
                          <p class="overlay_sub">正在登录中</p>
                        </div>
                      </div>
                      <p class="weixin-scan-tips" id="scan_unsuccessfuly" style="display: none; margin-top: 6px">
                        <i class="text-orange fa fa-exclamation-circle"></i>
                        <span class="scan_unsuccessfuly-text">手机端取消登录，重新扫码</span>
                      </p>
                      <p class="" id="pc-wx-login-tip">
                        如果已登录电脑微信，可<span class="cliLink" id="pc-wx-login-btn">点此直接登录</span>
                      </p>
                    </div>
                  </div>
                  <div class="cut-line"></div>
                  <div class="login-step-first common-login-content login-step-first-new" id="common-login-content">
                    <div class="login-step-first-wrapper">
                      <div class="user-weixin-info">
                        <img alt="" src="" />
                        <span>你的微信名</span>
                      </div>
                      <h2 class="mobile_login_title none" id="login-main-title">手机号登录</h2>
                      <div class="login_type_tabs">
                        <div class="psw_tab active_tab">密码登录</div>
                        <div class="code_tab">验证码登录</div>
                      </div>
                      <div class="weixin-gobind-title" id="weixin-gobind-title">绑定已有账号</div>
                      <form class="form_entry new_form_entry" id="form_entry" method="post" style="">
                        <div class="login_form">
                          <div class="login-form-list">
                            <div class="login-form-item">
                              <input
                                class="login_input"
                                id="loginemail"
                                name="account"
                                placeholder="请输入手机号"
                                style=""
                                tabindex="1"
                                type="text"
                                value=""
                              />
                              <label class="error-tip error-tip-account">请填写手机号</label>
                              <div class="set-password-tip none">
                                <span style="background-color: #fff">
                                  <span class="set-password text-blue pointer" set-password="">设置登录密码</span>
                                </span>
                              </div>
                            </div>
                            <p class="advanced_member_login_tip none">当前手机号非高级成员，已注册账号请使用普通登录</p>
                            <div
                              class="login-form-item none"
                              id="advanced_member_confirm_wrapper"
                              style="margin-top: 12px"
                            >
                              <input
                                autocomplete="off"
                                class="login_input m-t-xs"
                                id="verifycode-confirm-input"
                                name="confirm_input"
                                placeholder="请输入验证码"
                                style=""
                                tabindex="2"
                                type="text"
                              />
                              <label class="error-tip error-tip-safecode"></label>
                              <input
                                class="confirm_send_again confirm_send_again_allow login-btn-ghost-default"
                                id="advanced_memeber_confirm_send_again"
                                name="confirm_send_again"
                                style=""
                                type="button"
                                value="获取验证码"
                              />
                            </div>
                            <div class="login-form-item clearfix" id="loginpassword-box" style="margin-top: 12px">
                              <input
                                class="login_input"
                                id="loginpassword"
                                name="password"
                                placeholder="请输入密码"
                                style=""
                                tabindex="2"
                                type="password"
                              />
                              <label class="error-tip error-tip-password">请填写密码</label>
                            </div>
                            <!-- style="display:none;" -->
                            <div class="safecodes none" id="_safecodes">
                              <div class="login-form-item" style="margin-top: 12px">
                                <input
                                  class="esafecode"
                                  id="esafecode"
                                  maxlength="4"
                                  name="safecode"
                                  placeholder="验证码"
                                  style=""
                                  tabindex="3"
                                  type="text"
                                />
                                <a errnumber="0" href="javascript:;" id="safecode">
                                  <img class="isafecode" src="../../assets/images/dc029ad68290.png" />
                                </a>
                                <div class="tooltip top fade" role="tooltip">
                                  <div class="tooltip-arrow"></div>
                                  <div class="tooltip-inner">看不清楚？换一个</div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <label class="keep_line md-check cli-check" id="auto-login-check-box">
                            <input id="keepstate" name="keepstate" style="" type="checkbox" />
                            <i class="plaingreen"></i>
                            <span class="keepstateTip">下次自动登录</span>
                          </label>
                          <div class="red-error-tip submit-error">
                            <i class="fa fa-times-circle"></i>
                            <span class="submit-error-content"></span>
                          </div>
                          <input id="isactives" name="isactives" style="" type="hidden" value="" />
                          <input name="ori_type" style="" type="hidden" value="" />
                          <input name="referer" style="" type="hidden" value="" />
                          <input name="getframe" style="" type="hidden" value="" />
                          <input id="weixin_login" name="weixin_login" style="" type="hidden" value="" />
                          <input
                            class="btn green btn-block submit-button-margin transit login-btn-green"
                            id="login-btn"
                            name="submits"
                            style=""
                            type="submit"
                            value="登 录"
                          />
                          <div class="forget_pass_box" id="login_other_option_box">
                            <a class="forget_pass cliLink" href="./pages/password/forget.html" target="_blank">
                              忘记密码？
                            </a>
                          </div>
                          <div
                            class="red-error-tip none"
                            id="need-register-tip"
                            style="margin-top: 12px; line-height: 17px"
                          >
                            当前手机号还未注册草料，请先
                            <span id="to-register-with-account" style="color: #166bc7; cursor: pointer">前往注册</span>
                          </div>
                          <div class="red-error-tip none" id="need-psw-tip" style="margin-top: 12px; line-height: 17px">
                            未设置登录密码，
                            <span id="to-register-with-account" set-password="" style="color: #166bc7; cursor: pointer">
                              去设置
                            </span>
                          </div>
                        </div>
                      </form>
                    </div>
                    <div class="set-login-psw-wrapper none">
                      <span id="return-login-btn">
                        <span
                          class="clifont anticon-cli-angle-left"
                          style="font-size: 16px; position: relative; top: 1px; margin-right: 6px"
                        ></span>
                        返回
                      </span>
                      <div class="set-psw-header">
                        <h2>设置登录密码</h2>
                        <span id="skip-setup-btn">跳过设置</span>
                      </div>
                      <div class="login-form-list">
                        <div class="login-form-item clearfix" id="set-login-psw-box">
                          <input
                            class="login_input"
                            id="set-login-psw"
                            name="password"
                            placeholder="请输入密码"
                            style=""
                            tabindex="2"
                            type="password"
                          />
                          <label class="error-tip error-tip-password">请填写密码</label>
                        </div>
                      </div>
                      <div
                        class="btn green btn-block submit-button-margin transit login-btn-green"
                        id="login-btn-after-set-psw"
                      >
                        登 录
                      </div>
                      <div class="login_foot register_foot none" id="set-psw-footer" style="white-space: nowrap">
                        <label class="register-change-style keep_line md-check cli-check" id="set-psw-agreement-input">
                          <input id="agreementBeforeSetPsw" name="agreementNoweixin" style="" type="checkbox" />
                          <i class="plaingreen"></i>
                          <span style="margin-left: 18px">
                            已阅读并同意
                            <a class="provision_link" href=".//cli.im/help/52960" target="_blank">《草料用户协议》</a>
                            及
                            <a class="provision_link" href=".//cli.im/help/49902" target="_blank">《隐私协议》</a>
                          </span>
                        </label>
                      </div>
                      <div class="agreement-error-tip none" id="agreement-error-tip-before-set-psw">
                        请先阅读并同意用户协议及隐私协议
                      </div>
                    </div>
                  </div>
                  <div class="bottom-other-login-tips">
                    <div class="tip-text-wrapper none">
                      <div class="divider"></div>
                      <span>其他方式登录</span>
                      <div class="divider"></div>
                    </div>
                    <p class="wxwork-scan-tips">
                      <a class="cliLink" href="./pages/login/oauth/wxwork.html" id="wxwork-login-url" target="_blank">
                        <span style="vertical-align: top; display: inline-block">
                          <svg
                            fill="none"
                            height="21"
                            viewbox="0 0 20 21"
                            width="20"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M11.2846 14.9952C10.1999 15.4293 9.04225 15.5011 7.88461 15.4293C7.37873 15.3564 6.87284 15.2846 6.36696 15.1399C6.2952 15.1399 6.22225 15.1399 6.15049 15.2129C5.49873 15.5011 4.84814 15.8635 4.27049 16.1517C4.1766 16.2225 4.06221 16.2608 3.94461 16.2608C3.82701 16.2608 3.71261 16.2225 3.61872 16.1517C3.40225 16.0082 3.40225 15.7905 3.40225 15.5011C3.54696 14.9952 3.54696 14.4893 3.61872 13.9835C3.61872 13.9105 3.54696 13.8388 3.54696 13.7658C2.82343 13.0435 2.24461 12.3188 1.81167 11.3799C1.08814 9.64346 1.23284 7.90934 2.24461 6.31757C3.25755 4.58228 4.84814 3.64228 6.72814 3.20816C8.60931 2.77404 10.4164 2.99169 12.1517 3.85875C13.7434 4.65404 14.8999 5.88346 15.4058 7.61875C15.6234 8.27052 15.6952 8.9211 15.6234 9.57169C15.2623 9.21052 14.8281 9.13757 14.394 9.35522C14.394 8.91993 14.394 8.48699 14.2493 8.05287C13.9599 7.0411 13.3811 6.24581 12.6587 5.59404C11.4293 4.58228 9.91049 4.14816 8.3199 4.14816C6.65637 4.29287 5.21049 4.87169 4.05284 6.02816C3.11284 6.96934 2.60578 8.12581 2.67872 9.49875C2.75167 10.6564 3.25755 11.5964 3.98108 12.3929L4.55872 12.9705C4.84814 13.187 4.92108 13.4046 4.77637 13.694C4.70343 13.9823 4.63167 14.3446 4.55872 14.634C4.55872 14.7058 4.48696 14.7788 4.55872 14.7788C4.63167 14.8505 4.70343 14.7788 4.70343 14.7788C5.06578 14.5611 5.49872 14.3435 5.86108 14.0552C6.07755 13.9105 6.2952 13.9105 6.58343 13.9835C7.81105 14.3453 9.11699 14.3453 10.3446 13.9835C10.4164 13.9835 10.4893 13.9105 10.4893 14.0552C10.634 14.4893 10.8505 14.7788 11.2846 14.9964V14.9952Z"
                              fill="#0082EF"
                            ></path>
                            <path
                              d="M18.5168 13.5479C18.5195 13.7744 18.4404 13.9942 18.2941 14.1671C18.1478 14.3399 17.9441 14.4543 17.7203 14.4891C16.998 14.6326 16.4191 14.922 15.9132 15.4279C15.7685 15.5726 15.6956 15.5726 15.5509 15.5008C15.4791 15.4279 15.4791 15.2844 15.5509 15.1397C16.0568 14.6338 16.3474 13.982 16.4921 13.3314C16.5627 12.8255 17.0697 12.5361 17.5756 12.5361C18.1544 12.6079 18.5168 13.042 18.5168 13.5479Z"
                              fill="#0081EE"
                            ></path>
                            <path
                              d="M14.8284 17.4537C14.3225 17.4537 13.8872 17.0913 13.8166 16.6584C13.7437 15.9349 13.3813 15.3561 12.8754 14.9219C12.8037 14.8502 12.7307 14.7784 12.8037 14.6337C12.8754 14.4161 13.0202 14.4161 13.1649 14.489C13.3096 14.5608 13.3813 14.7055 13.4543 14.7772C13.8884 15.1396 14.3943 15.3561 14.9013 15.429C15.4072 15.5008 15.7684 16.0066 15.6954 16.5137C15.7684 17.0196 15.3343 17.4537 14.8284 17.4537Z"
                              fill="#FA6202"
                            ></path>
                            <path
                              d="M10.9952 13.6929C10.9952 13.187 11.2846 12.8259 11.7904 12.6811C12.514 12.5364 13.0928 12.247 13.5987 11.74C13.7434 11.5964 13.8881 11.5964 13.9599 11.74C14.0328 11.8129 14.0328 11.9576 13.8881 12.1023C13.4479 12.5351 13.1458 13.0886 13.0199 13.6929C13.0199 13.7659 13.0199 13.9106 12.9481 13.9823C12.8034 14.4882 12.3693 14.7788 11.8634 14.7059C11.6208 14.6706 11.3993 14.5487 11.2396 14.3627C11.08 14.1767 10.9932 13.9392 10.9952 13.6941V13.6929Z"
                              fill="#FECD00"
                            ></path>
                            <path
                              d="M15.985 11.1634C16.2026 11.5964 16.4191 11.9575 16.7085 12.247C16.8532 12.3917 16.8532 12.5364 16.7803 12.6081C16.7085 12.7528 16.5638 12.7528 16.4191 12.6081C16.057 12.1894 15.5788 11.8877 15.045 11.7411C14.9003 11.6681 14.7556 11.6681 14.6109 11.6681C14.3226 11.5964 14.0332 11.4517 13.9603 11.0905C13.8156 10.7281 13.8156 10.367 14.105 10.0787C14.3944 9.71636 14.7556 9.64342 15.1168 9.71636C15.4791 9.86107 15.7685 10.0775 15.8403 10.5117C15.8403 10.7281 15.9132 10.9458 15.985 11.1622V11.1634Z"
                              fill="#2CBD00"
                            ></path>
                          </svg>
                        </span>
                        企业微信登录
                        <span
                          class="clifont anticon-cli-angle-right"
                          style="font-size: 16px; position: relative; top: 1px"
                        ></span>
                      </a>
                    </p>
                  </div>
                  <!-- <div class="register-footer text-center"> <div footer-normal class="normal text-center"> 还没有账号？<a href="/join?" class="action-btn register-btn noactive text-blue" onclick="StatisticsData(105, 106)" >立即免费注册</a> </div> <div set-password-return class="set-password-return text-center none"> <span set-password-return-tip class="text-blue pointer">返回扫码登录</span> </div> </div> -->
                </div>
                <div class="verification-code-container-v1 none">
                  <span class="subtitle">账号安全验证</span>
                  <p class="desc">
                    为防止未经授权的访问，在不同设备或浏览器登录时需要进行二次验证
                    <br />
                    请输入发送至
                    <span class="phone-number">148****9283</span>
                    的6位验证码，验证码有效期5分钟
                  </p>
                  <div class="input-content">
                    <div class="code-container">
                      <input
                        :autofocus="true"
                        autocomplete="off"
                        class="code-input"
                        maxlength="1"
                        style=""
                        type="text"
                      />
                      <input autocomplete="off" class="code-input" maxlength="1" style="" type="text" />
                      <input autocomplete="off" class="code-input" maxlength="1" style="" type="text" />
                      <input autocomplete="off" class="code-input" maxlength="1" style="" type="text" />
                      <input autocomplete="off" class="code-input" maxlength="1" style="" type="text" />
                      <input autocomplete="off" class="code-input" maxlength="1" style="" type="text" />
                    </div>
                    <div class="hint">
                      <span class="get-code-tips">43秒后可重新获取验证码</span>
                    </div>
                  </div>
                  <button :disabled="true" class="verify-btn">验证</button>
                  <div class="trust-device-checkbox">
                    <label class="md-check cli-check" for="maintain_trusted_devices">
                      <input
                        :checked="true"
                        id="maintain_trusted_devices"
                        name="maintain_trusted_devices"
                        style=""
                        type="checkbox"
                      />
                      <i class="plaingreen"></i>
                      <span class="keepstateTip">信任该设备，后续登录无需验证码</span>
                    </label>
                  </div>
                  <p class="senior-members-tips">
                    企业内多人登录管理，可付费高级版起，添加高级成员独立账号，协作更安全高效
                    <a class="provision_link" href=".//cli.im/help/80288" target="_blank">了解更多</a>
                  </p>
                </div>
                <div class="email-entry-verify none">
                  <div class="email-entry-verify-header">
                    <span class="subtitle">手机号安全验证</span>
                    <p class="desc">为了确保你的账户安全，请先绑定您的手机号码，然后输入验证码完成二次验证。</p>
                  </div>
                  <div class="input-content">
                    <input
                      :autofocus="true"
                      autocomplete="off"
                      class="phone-number-input"
                      maxlength="11"
                      placeholder="请输手机号"
                      style=""
                      type="text"
                    />
                  </div>
                  <button class="email-verify-btn disabled">手动获取验证码</button>
                </div>
                <div class="verify-back-step none">
                  <span>返回上一步</span>
                </div>
                <div class="set-password-box none" style="width: 220px; height: 430px">
                  <h2 class="join-step-first-title" id="set-password-title">设置密码</h2>
                  <div class="login-form-list set-password-form" style="margin-top: 24px">
                    <div class="login-form-item">
                      <input
                        class="login_input"
                        id="set_account_input"
                        name="username"
                        placeholder="请输入手机号"
                        style=""
                        tabindex="1"
                        type="text"
                        value=""
                      />
                      <label class="error-tip error-tip-account">请填写手机号</label>
                    </div>
                    <div class="login-form-item" style="margin-top: 12px">
                      <input
                        autocomplete="off"
                        class="login_input m-t-xs"
                        id="set_confirm-input"
                        name="confirm_input"
                        placeholder="请输入验证码"
                        style=""
                        tabindex="2"
                        type="text"
                      />
                      <label class="error-tip error-tip-safecode"></label>
                      <input
                        class="confirm_send_again confirm_send_again_allow"
                        id="set_confirm_send_again"
                        name="confirm_send_again"
                        style="font-size: 12px"
                        type="button"
                        value="获取验证码"
                      />
                    </div>
                    <div class="login-form-item weixin-input" style="margin-top: 12px">
                      <input style="display: none" />
                      <input
                        autocomplete="off"
                        class="login_input"
                        id="set_password"
                        name="set_password"
                        placeholder="请输入密码"
                        style=""
                        tabindex="2"
                        type="password"
                      />
                      <label class="error-tip error-tip-password">请填写密码</label>
                    </div>
                  </div>
                  <input
                    class="btn btn-block green transit join_confirm_btn"
                    id="join_confirm_btn"
                    name="join_confirm_btn"
                    style=""
                    type="button"
                    value="确 定"
                  />
                  <div class="text-green text-center none" set_password_success="">密码设置成功</div>
                </div>
                <input id="referer" name="referer" style="" type="hidden" value="" />
                <div class="success_box" id="success_box">
                  <!-- -->
                  <!-- -->
                  <div id="occasion" style="height: 100%"></div>
                  <div class="full-size" id="weixin-public-module">
                    <h2 class="weixin-public-title">关注草料公众号</h2>
                    <div class="weixin-code-imgbox">
                      <img alt="" class="wxBindImage" src="" />
                      <div class="wxBindInfo none text-green text-xs"></div>
                    </div>
                    <div class="box-info-title">微信扫码 免密登录</div>
                    <div class="box-info-second">及时接收账户提醒通知</div>
                    <div class="box-info-third">二维码专属顾问在线指导</div>
                    <div class="jump-skip" id="jump-skip">下次再说</div>
                  </div>
                </div>
                <div class="logining none" logining="">
                  <div class="imgBox">
                    <img alt="" src="../../assets/images/8ccb61dca5a2.gif" />
                    <div class="login-text">正在登录中</div>
                  </div>
                </div>
                <div class="iframe-top-to-jump-action">
                  <div class="normal text-center" top-to-register="">
                    <span id="no_account_register_tip">还没有账号，</span>
                    <a class="top-action-btn login-btn-ghost-default" href="./pages/join.html">免费注册</a>
                  </div>
                </div>
                <!-- <script type="text/css" id="demo-account-css"> .demo-trigger { position: absolute; width: 100%; bottom: -64px; text-align: center; left: 0; } .demo-account-modal { background: #fff; border-radius:4px; text-align: center; box-sizing: border-box; padding: 50px 0 48px; } .demo-account-modal-title { font-size:18px; color: rgba(0,0,0,0.87); line-height:23px; text-align: center; } .demo-account-modal-sub-title { margin-top: 4px; font-size: 14px; color: #666; text-align: center; } .demo-account-list { margin: 24px 0; display: inline-block; } .demo-account-item { box-sizing: border-box; width:207px; height:48px; line-height: 46px; background: rgba(255,255,255,1); border: 1px solid #3cb067; text-align: center; margin-bottom: 16px; color: #3cb067; font-size: 16px; cursor: pointer; border-radius: 4px; } .demo-account-item a { color: #3cb067; font-size: 16px; } .demo-account-item:hover { background: #3cb067; color: #fff; } .demo-account-note { font-size:12px; color:rgba(153,153,153,1); line-height:12px; } .demo-account-btn { margin: 0; padding: 0; width:120px; height:36px; line-height: 34px; background:rgba(255,255,255,1); border-radius:2px; border: 1px solid #00A13B; font-size:14px; color: #008C33; cursor: pointer; } </script><script> var inIframe = false;</script><style>
.footer {
  border-top: 1px solid #ddd;
}
.login_main {
  top: 45%;
}
</style><div class="demo-trigger"> <span>看看同行怎么用？</span> <button class="demo-account-btn" toggle-modal >登录体验账号</button></div><script> (function () { function demoLog(sec, type) { var parentUrl = inIframe ? window.parent.location.href : window.location.href; var pathname = window.location.pathname; if (!type) { type = ''; } StatisticsData(220, sec, [type, parentUrl, pathname].join(';')); } var root = inIframe ? window.parent.document.body : document.body; function appendStyle(root, styleContent) { var style = $('<style demo-account-modal-style >

</style>').html(styleContent); if ($(root).find('[demo-account-modal-style]').length < 1) { $(root).append(style); } } function initStyle() { var styleContent = $('#demo-account-css').html(); appendStyle(root, styleContent); if (inIframe) { appendStyle(document.body, styleContent) } } function clearStyle() { $(root).find('[demo-account-modal-style]').remove(); if (inIframe) { $(document.body).find('[demo-account-modal-style]').remove(); } } initStyle(); function Modal(options) { var content = options.content; var div = document.createElement('div'); var closeDiv = $('<div>×</div>'); var context = this; closeDiv.click(function () { var canClose = true; if (options.onClose) { canClose = options.onClose(); } if (canClose === false) return; context.hide(); }); closeDiv.css({ 'position': 'absolute', 'right': '10px', 'top': '10px', 'width': '20px', 'height': '20px', 'z-index': '99999999', 'cursor': 'pointer', 'line-height': 1, 'color': '#666', 'text-shadow': '0 1px 0 #fff', 'font-size': '24px', '-webkit-font-smoothing': 'antialiased' }); $(div).css($.extend({ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, zIndex: 9999, margin: 'auto' }, options.style)); $(div).append(content); $(div).append(closeDiv); if (options.mask) { var defaultMask = document.createElement('div'); $(defaultMask).css({ backgroundColor: 'rgba(0, 0, 0, 0.5)', position: 'fixed', left: 0, right: 0, bottom: 0, top: 0, zIndex: 10000001 }); this.mask = typeof options.mask === 'boolean' ? defaultMask : options.mask; } this.container = div; this.content = content; this.visible = false; } Modal.prototype = { render: function () { if (this.visible) { if (this.mask) { root.appendChild(this.mask); } root.appendChild(this.container); if (this.content && this.content[0] && this.content[0].getBoundingClientRect) { var rect = this.content[0].getBoundingClientRect(); this.setContainerStyle({ width: rect.width + 'px', height: rect.height + 'px' }) } } else { root.removeChild(this.container); if (this.mask) { root.removeChild(this.mask); } } }, show: function () { this.visible = true; this.render(); }, hide: function () { this.visible = false; this.render(); }, toggle: function () { this.visible = !this.visible; this.render(); }, setContainerStyle: function (css) { $(this.container).css(css); } }; function generateAccountList(list) { if (!list) { list = []; } var $ul = $('<ul class="demo-account-list" ></ul>'); var createItem = function (item) { var $li = $('<li class="demo-account-item"></li>'); $li.attr('data-name', item.show_name); $li.attr('data-id', item.login_user_id); $li.attr('data-type', item.type); $li.text(item.show_name); return $li; }; for (var i = 0; i<list.length; i++) { var item = list[i]; $ul.append(createItem(item)) } return $ul.prop("outerHTML"); } function getDemoUrl(id, cb, err) { $.ajax({ async: true, type: "get", url: '//' + userDomain + '/user_role/get_demo_user_loginurl?login_user_id='+id + '&_=' + (new Date().getTime()), dataType: 'json', success: function (ret) { if (ret.status == 1) { cb(ret.data.url); } else { err(ret) } }, error: function () { err() } }); } $(function () { $.ajax({ async: true, type: "get", url: '//' + userDomain + '/user_role/get_demo_user_list?_=' + (new Date().getTime()), dataType: 'json', success: function(ret) { if (ret.status != 1) return; var content = $([ '<div class="demo-account-modal">', ' <div class="demo-account-modal-title">', ' 登录行业体验账号，可快速查看典型应用效果和后台管理模式', ' </div>', '<div class="demo-account-modal-sub-title">体验账号仅供浏览参考，不支持进行增删改等操作</div>', generateAccountList(ret.data), ' <p class="demo-account-note" >更多行业，正在整理中...</p>', ' </div>' ].join('')); var modal = new Modal({ content: content, mask: true, onClose: function () { demoLog(6); }, style: { width:'600px', /*height:'358px',*/ top: inIframe ? 0 : '-96px' } }); $('[toggle-modal]').click(function () { modal.setContainerStyle({ zIndex: 10000002, position: 'fixed' }); modal.toggle(); demoLog(2); }); var loadingUser = ''; function setLoading(loading) { loadingUser = loading; } content.find('.demo-account-item').click(function () { var userId = $(this).attr('data-id'); var type = $(this).attr('data-type'); if (userId === loadingUser) return; demoLog(13, type); setLoading(userId); getDemoUrl(userId, function (url) { if (inIframe) { window.parent.location.href = url; } else { window.location.href = url; } setTimeout(function () { setLoading(''); }, 1000); }, function () { setLoading(''); }); }); $(window).unload(function(){ modal.hide(); clearStyle(); }); } }); demoLog(1); }); }());</script> -->
              </div>
              <div
                class="pc_wx_login_wrapper-noiframe pc_wx_login_wrapper-noiframe-noHeight none"
                id="pc_wx_login_wrapper"
              >
                <div class="none" id="pc_wx_login_content">
                  <div class="none" id="exclusive_pc_wx_login_content_return_back">
                    <span class="clifont anticon-cli-angle-left return-back-icon" style="font-size: 22px"></span>
                    返回
                  </div>
                  <div class="none" id="pc_wx_login_iframe_container_wrapper">
                    <h2>电脑微信直接登录</h2>
                    <span>
                      Windows微信版本 3.9.11 或macOS微信版本 4.0.0 及以上版本，可直接快捷登录
                      <a class="cliLink" href="https://cli.im/help/100126" id="doc-link" target="_blank">了解详情</a>
                    </span>
                    <div id="pc_wx_login_iframe_container">
                      <iframe
                        frameborder="0"
                        height="400px"
                        scrolling="no"
                        src="https://open.weixin.qq.com/connect/qrconnect?appid=wx0b40fbc2467094e3&amp;scope=snsapi_login&amp;redirect_uri=https%3A%2F%2Fnc.cli.im%2Fapi%2FWeixin%2FredirectUrlCheck%3Ftimestamp%3D1758101876%26socket_id%3D184fcvlj7bh5oagiseipvvs69k&amp;state=f4e577b20d083d1ad2654a0b0a9d858c&amp;login_type=jssdk&amp;self_redirect=true&amp;styletype=&amp;sizetype=&amp;bgcolor=&amp;rst=&amp;ts=1758101876743&amp;href=//static.clewm.net/cli/css/pcWxLoginIframe.css"
                        width="300px"
                      ></iframe>
                    </div>
                  </div>
                  <div class="none" id="pc_wx_login_loading">
                    <img alt="loading" src="../../assets/images/cbd0851f409c.gif" />
                    <span>正在登录中...</span>
                  </div>
                  <div class="none" id="pc_wx_login_error">
                    <h2>无法快捷登录</h2>
                    <ul>
                      <li>
                        未注册过草料账号，请先
                        <a class="cliLink" href="./pages/join.html" id="to-register-btn">前往注册</a>
                      </li>
                      <li>当前微信未关联草料账号，需在「设置」页绑定微信</li>
                      <li class="none" id="exclusive-login-error-tip">
                        非该企业的高级成员，无法登录企业专属后台，请联系管理员
                      </li>
                    </ul>
                    <a class="cliLink" href="https://cli.im/help/100126" id="more-info-link" target="_blank">
                      了解更多
                    </a>
                    <div class="login-btn-ghost-default" id="choose-other-login-method">使用其他方式登录</div>
                  </div>
                </div>
                <div class="cliLink" id="return-default-login">返回使用微信或手机号登录</div>
              </div>
              <div class="login_main" id="weixin-unbind-content">
                <img alt="" class="weixin-unbind-img" src="../../assets/images/d0c2219d5e26.png" />
                <div class="weixin-unbind-title">未绑定微信</div>
                <div class="weixin-unbind-desc">微信号未绑定草料账号</div>
                <a class="btn green btn-block mt24 transit weixin-unbind-link" href="./pages/join.html">绑定新账号</a>
                <div class="btn weixin-login-btn" weixin-gobind="">已有账号，前去绑定</div>
              </div>
              <div class="check-phone-main" id="check-phone-main">
                <p class="check-phone-title">绑定手机号</p>
                <p class="check-phone-desc text-grey m-t">根据《网络安全法》要求，需要绑定手机号才能继续使用</p>
                <div class="check-phone-form" style="margin-top: 24px">
                  <div class="login-form-list">
                    <div class="login-form-item">
                      <input
                        class="check-phone-input"
                        id="check-phone-value"
                        placeholder="请输入手机号"
                        style=""
                        type="text"
                      />
                      <label class="error-tip error-tip-account">请填写手机号</label>
                    </div>
                    <div class="login-form-item">
                      <input
                        class="check-phone-input m-t-xs"
                        id="confirm-input"
                        name="confirm_input"
                        placeholder="请输入验证码"
                        style=""
                        type="text"
                      />
                      <input
                        class="confirm_send_again confirm_send_again_allow"
                        id="confirm-send"
                        name="confirm_send_again"
                        style="font-size: 12px"
                        type="button"
                        value="发送验证码"
                      />
                      <label class="error-tip error-tip-verifycode">请填写验证码</label>
                    </div>
                  </div>
                  <input
                    class="btn btn-block green transit person-check-btn-new"
                    id="person-check-btn"
                    name="person-check-btn"
                    style=""
                    type="button"
                    value="确 定"
                  />
                  <label class="error-tip error-tip-other m-t-sm">验证失败，请重试</label>
                </div>
              </div>
            </div>
            <div
              id="tcaptcha_transform_dy"
              style="opacity: 0; position: absolute; transition: opacity 0.3s linear; top: -1e6px"
            >
              <iframe
                border="0"
                frameborder="0"
                id="tcaptcha_iframe_dy"
                marginheight="0"
                marginwidth="0"
                name="https://turing.captcha.qcloud.com"
                scrolling="no"
                src="https://turing.captcha.gtimg.com/1/template/drag_ele.html"
              ></iframe>
            </div>
            <div id="batBeacon956579478878" style="width: 0px; height: 0px; display: none; visibility: hidden">

            </div>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>
<script setup lang="ts">
import { defineProps, defineEmits, watch, onMounted, withDefaults } from 'vue'

// 定义 props
interface Props {
  modelValue: boolean
  title?: string
  closeOnClickOverlay?: boolean
  iframeSrc?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  title: '登录草料账号',
  closeOnClickOverlay: true,
  iframeSrc: '/qrcode/login'
})

// 定义事件
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  close: []
  success: [userInfo: any]
  load: []
}>()

// 监听 modelValue 变化
watch(
  () => props.modelValue,
  newVal => {
    console.log('🔍 [Login组件] modelValue变化:', newVal)
    console.log('📊 [Login组件] 当前props:', {
      modelValue: props.modelValue,
      title: props.title,
      closeOnClickOverlay: props.closeOnClickOverlay
    })
  },
  { immediate: true }
)

onMounted(() => {
  console.log('🎯 [Login组件] 组件已挂载，初始modelValue:', props.modelValue)
})

// 处理遮罩层点击
const handleOverlayClick = () => {
  console.log('👆 [Login组件] 点击遮罩层，closeOnClickOverlay:', props.closeOnClickOverlay)
  if (props.closeOnClickOverlay) {
    handleClose()
  }
}

// 处理关闭
const handleClose = () => {
  console.log('🚪 [Login组件] 触发关闭事件')
  emit('update:modelValue', false)
  emit('close')
}
</script>

<style src="../../assets/css/537da9432ebf.css" scoped />
<style src="../../assets/css/f31611298611.css" scoped />
<style src="../../assets/css/f6d6073f1386.css" scoped />
<style src="../../assets/css/780602a0f998.css" scoped />
<style src="../../assets/css/cc1b2d3699e5.css" scoped />
<style src="../../assets/css/5f76266fe506.css" scoped />
<style src="../../assets/css/27bf659698e8.css" scoped />
<style src="../../assets/css/780602a0f998.css" scoped />
<style src="../../assets/css/5b35d47a1dc1.css" scoped />
<style src="../../assets/css/61cccfbb0a59.css" scoped />
<style src="../../assets/css/a66b94270420.css" scoped />
<style src="../../assets/css/27c8a6a1bb3e.css" scoped />
<style src="../../assets/css/27bf659698e8.css" scoped />
<style src="../../assets/css/550fc263d99a.css" scoped />
<style src="../../assets/css/27bf659698e8.css" scoped />

<style scoped>
/* 模态框遮罩层 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 模态框容器 - 调整尺寸设置 */
.modal-container {
  background: transparent; /* 透明背景，让wrapper的背景色显示 */
  border-radius: 8px;
  width: 1200px; /* 固定宽度为1200px */
  height: 656px; /* 固定高度为656px */
  overflow: hidden; /* 隐藏溢出内容 */
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-close-btn:hover {
  background: white;
  transform: rotate(90deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modal-close-btn svg {
  color: #666;
}

/* 过渡动画 */
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.3s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

.modal-fade-enter-active .modal-container,
.modal-fade-leave-active .modal-container {
  transition: transform 0.3s ease;
}

.modal-fade-enter-from .modal-container {
  transform: scale(0.9);
}

.modal-fade-leave-to .modal-container {
  transform: scale(0.9);
}

/* 移除converted-UserJoin的内边距，让内容完全贴合容器 */
.modal-container .converted-UserJoin {
  position: relative;
  padding: 0; /* 移除所有内边距 */
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* wrapper应该完全填充容器 */
.modal-container .wrapper {
  width: 1200px;
  height: 656px;
  margin: 0;
  position: relative;
  background: #f5f5f5; /* 保持原有的灰色背景 */
  overflow-y: auto;
  overflow-x: hidden;
}

/* register-main-content 水平居中 */
.modal-container .register-main-content {
  margin: 0 auto;
  position: relative;
}

/* 确保关闭按钮在最上层 */
.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100; /* 提高z-index确保在最上层 */
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.login-main-title {
  min-height: 52px;
}

.login-main-content {
}

/* 适配小屏幕 */
@media (max-width: 1240px) {
  .modal-container {
    width: 95vw;
    height: 90vh;
    max-height: 656px;
  }

  .modal-container .wrapper {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 768px) {
  .modal-overlay {
    padding: 10px;
  }

  .modal-container {
    width: 100%;
    height: 100vh;
    border-radius: 0;
  }

  .modal-container .wrapper {
    width: 100%;
    height: 100%;
  }

  .modal-close-btn {
    top: 10px;
    right: 10px;
  }
}
</style>
